<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星星题</title>
    <style>
        .box {
            width: 205px;
            background-color: #ccc;
            color:yellow;
            font-size: 50px;

        }
    </style>
</head>
<body>
    <div class="box">
        <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 定义是否被点击选中星星
            var isChecked = false;
            $(".box>span").mousemove(function () {
                if (!isChecked) {
                    // 没被选中时，鼠标移上哪个 span ，让它和前面的 span 内容为 ★，后面的 span 内容为 ☆
                    $(this).text("★").prevAll().text("★").end().nextAll().text("☆");
                }
            }).mouseout(function () {
                if (!isChecked) {
                    // 鼠标离开后，如果没有点击选择，就让所有 span 内容恢复为 ☆
                    $(".box>span").text("☆");
                }
            }).click(function () {
                // 鼠标点击了某个 span，表示选择
                // 后期鼠标移上或离开，都会保持当前选中的状态
                isChecked = true;
            })
        })
    </script>
</body>
</html>